<template>
  <div style="width:100%;height:100%;background:none">
    <div class="title">施工单位</div>
    <div class="tableTitlt" style="margin-left:2rem;padding-left:3rem;margin-bottom:1rem">
      <span style="width:20%">标段</span>
      <span style="width:30%">单位名称</span>
      <span style="width:10%">分包单位</span>
      <span style="width:10%">在场人数</span>
      <span style="width:10%">工资累计支付</span>
      <span style="width:15%">操作</span>
    </div>
    <div style="margin-left:2rem;height:77%">
      <!-- <vue-seamless-scroll :data="List" class="seamless-warp" :class-option="classOption"> -->

      <ul>
        <li v-for="(item, index) in List" :key="index" @click="openPoint(item)">
          <span
            style="width:20%;overflow:hidden;white-space:nowrap;text-overflow: ellipsis;"
          >{{item.tenderCode}}</span>
          
              <!-- <span>{{item.orgName}}</span> -->
           
            <span
              style="width:30%;overflow:hidden;white-space:nowrap;text-overflow: ellipsis;"
            >{{item.orgName}}</span>
          

          <span
            style="width:10%;overflow:hidden;white-space:nowrap;text-overflow: ellipsis;"
          >{{item.labourOrgTotal}}</span>
          <span
            style="width:10%;overflow:hidden;white-space:nowrap;text-overflow: ellipsis;"
          >{{item.inPersonTotal}}</span>
          <span
            style="width:10%;overflow:hidden;white-space:nowrap;text-overflow: ellipsis;"
          >{{item.wagePay}}</span>
          <span
            style="width:15%;overflow:hidden;white-space:nowrap;text-overflow: ellipsis;"
            @click="projectDetails(item)"
          >{{item.option}}</span>
        </li>
      </ul>
      <!-- </vue-seamless-scroll> -->
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  data() {
    return {
      List: [
        {
          date: 'PGK-NT1',
          tenderCode: '京沪高速公路新沂至江都...',
          fullName: '5',
          news: '562',
          payTotal: '12565',
          option: '查看详情'
        }
      ],
      classOption: {
        step: 0.2, // 数值越大速度滚动越快
        // limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
        //  openRoll:false,
        // fheight:300,
      }
    }
  },
  components: {
    //组件
    vueSeamlessScroll
  },
  mounted() {
    let resData = this.$store.state.dataCenterHome.homePageLabourOrgVOList
    if (resData != null) {
      this.List = resData
    }
  },
  methods: {
    //查看标段信息
    projectDetails(item) {
      let t = true

      sessionStorage.setItem('projectFlag', t)
      sessionStorage.setItem('homeFlag', t)
      sessionStorage.setItem('gatewayId', item.orgId)

      sessionStorage.setItem('tenderName', item.tenderCode)
      const { href } = this.$router.resolve({
        path: `/fu/construction`
      })
      window.open(href, '_blank')
    },
    //打开地图的点
    openPoint(item){
      this.$store.commit('setPointPosition',item)
    }
  }
}
</script>
<style lang="less">
.bgc_tooltip {
    .ant-tooltip-inner {
      // 这里是框
      color: #333;
      background-color: #fff !important;
      z-index: 999;
      opacity: 1;
    }
    .ant-tooltip-arrow::before {
      // 这里是小三角形
      z-index: 999;
      opacity: 1;
      background-color: #fff !important;
    }
  }
</style>
<style scoped lang='less'>
.title {
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 0rem;
}
ul {
  overflow: auto;
  height: 100%;
}
ul::-webkit-scrollbar {
  display: none;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #fff;
}
li {
  cursor: pointer;
  margin-bottom: 11px;
  padding-left: 3rem;
  height: 36px;
  line-height: 36px;
  font-size: 1.4rem;
  border-radius: 1.5rem;
  background: rgba(0, 174, 239, 0.23);
}
li:hover {
  color: #fff;
  background: rgba(0, 174, 239, 0.75);
  transition: 0.5s all;
}
li span {
  display: inline-block;
  text-align: center;
}
.tableTitlt span {
  display: inline-block;
  font-size: 1.2rem;
  color: #fff;
  text-align: center;
}
.seamless-warp {
  width: 100%;
  height: 80%;
  margin: 0;
  overflow: hidden;
  font-size: 1.4rem;
  font-family: 'Microsoft YaHei';
  font-weight: 400;
  color: #5cffff;
}
</style>
